<template lang="pug">
  kalix-dialog.user-add(title='修改' bizKey="Imgs" ref="kalixBizDialog" v-bind:formModel.sync="formModel" v-bind:targetURL="targetURL"  v-bind:submitBefore="submitBefore")
    div.el-form(slot="dialogFormSlot")
      el-form-item(label="图片路径" prop="imgUrl" v-bind:label-width="labelWidth")
        kalix-clansman-upload(:action="action" ref="clearUpload"
        v-on:filePath="getFilePath" v-on:selectChange="setGroup" :fileList="fileList" fileType="img" tipText="只能上传jpg/png文件，且不超过2MB")
        kalix-img-upload.img-margin(v-model="formModel.imgUrl" readonly="readonly" v-on:ImgDel="ImgDel")
      el-form-item(label="类型" prop="type" v-bind:label-width="labelWidth" v-bind:rules="rules.type")
        kalix-select(v-model="formModel.type" v-bind:requestUrl="trainingGenreURL" placeholder="请选择类别名称"
        v-bind:paramObj="genreParam" v-bind:defaultSelect="true" v-on:selectChange="selectChange")
      el-form-item(label="图片标识" prop="identify" v-bind:label-width="labelWidth" v-bind:rules="rules.imgUrl")
        el-input(v-model="formModel.identify" placeholder="标识为1或2(1代表页面的上部图片，2代表页面的下部图片)")
</template>

<script type="text/ecmascript-6">
  import {ImgsURL, trainingGenreURL} from '../config.toml'
  import {baseURL} from '../../../../config/global.toml'
  import FormModel from './model'
  import KalixClansmanUpload from '../../../../components/fileUpload/upload'
  import KalixImgUpload from '../../../../components/corelib/components/common/imgUpload'

  export default {
    name: 'ImgsEdit',
    components: {KalixImgUpload, KalixClansmanUpload},
    data() {
      return {
        action: baseURL + '/camel/rest/upload',
        trainingGenreURL: trainingGenreURL,
        options: [],
        fileList: [],
        genreParam: undefined,
        labelWidth: '150px',
        formModel: Object.assign({}, FormModel),
        rules: {
          type: [{required: true, message: '请选择类别名称', trigger: 'change'}]
        },
        targetURL: ImgsURL,
        filePathArr: [],
        fileNameArr: []
      }
    },
    methods: {
      ImgDel(imgUrl) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          let arrImg = this.formModel.imgUrl.split(',')
          console.log('arrImg++++++++++++++', arrImg)
          let idx = arrImg.indexOf(imgUrl)
          arrImg.splice(idx, 1)
          this.formModel.imgUrl = arrImg.join(',')
          console.log('this.formModel.photo++++++++++++++', this.formModel.imgUrl)
          // this.filePathArr = arrImg
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      init(dialogOption) {
        console.log('---------dialogOption------------', dialogOption)
      },
      getFilePath(filePath, fileName) { // 图片上传路径
        this.filePathArr.push(filePath)
        this.fileNameArr.push(fileName)
      },
      submitBefore(baseDialog, callBack) { // 多张图片拼路径
        console.log('this.filePathArr+++++++++++++++++', this.filePathArr)
        let filePath = ''
        if (this.filePathArr.length > 0) {
          this.filePathArr.forEach(e => {
            filePath += e + ','
          })
          filePath = filePath.substr(0, filePath.length - 1)
        }
        console.log('filePath+++++++++++++++++', filePath)
        if (filePath.length > 0) {
          if (this.formModel.imgUrl === '') {
            baseDialog.formModel.imgUrl = filePath
          } else {
            baseDialog.formModel.imgUrl = this.formModel.imgUrl + ',' + filePath
          }
        }
        callBack()
      },
      setGroup(item) {
        this.formModel.imgUrl = item.imgUrl
      },
      selectChange(item) {
        this.formModel.type = item.name
      },
      onSubmitClick() { // 重写多张图片上传方法
        if (this.submitCustom && typeof (this.submitCustom) === 'function') {
          this.submitCustom(this)
        } else if (this.submitBefore && typeof (this.submitBefore) === 'function') {
          this.submitBefore(this, () => {
            this.SubmitClick() // 执行提交方法
          })
        } else {
          this.SubmitClick()
        }
      }
      // SubmitClick() {
      //   console.log('9999999999999999999999999999999999999999', this.formModel)
      //   this.$refs.formModel.validate((valid) => {
      //     console.log('submitAction---------------------', valid)
      //     if (valid) {
      //       this.axios.request({
      //         method: 'PUT',
      //         url: ImgsURL + '/id',
      //         data: this.formModel
      //       }).then(res => {
      //         console.log('res======================', res.data.msg)
      //         if (res.data.success) {
      //           Message.success(res.data.msg)
      //           this.visible = false
      //           this.$refs.kalixBizDialog.onCancelClick()
      //           EventBus.$emit(ON_REFRESH_DATA, this.bizKey, this.formModel) // 页面刷新
      //           // 关闭对话框
      //         } else {
      //           Message.error(res.data.msg)
      //           this.$refs.kalixBizDialog.onCancelClick()
      //           EventBus.$emit(ON_REFRESH_DATA, this.bizKey, this.formModel) // 页面刷新
      //         }
      //       })
      //     }
      //   })
      // }
    }
  }
</script>

<style scoped lang="stylus" type="text/stylus">
  .el-form
    width 50%
    margin auto
    .radio
      margin-left 150px
      margin-bottom 20px
      .el-radio
        color: #3465cb
        font-weight: bold
        font-size: 14px
</style>
